
<div class="block">
	<div class="block-header">
		<div class="block-header-title pull-left">Devices By OS</div>
	</div>

	<div class="container-fluid raw-fluid block-body"
		id="chart-{{index}}"></div>

</div>


 

<script type="text/javascript">
	$(function() {
		
		alert(JSON.stringify(chartData));
				
		$('#chart-{{index}}')
				.highcharts(
						{
							chart : {
								plotBackgroundColor : null,
								plotBorderWidth : null,
								plotShadow : false
							},
							title : {
								text : 'Browser market shares at a specific website, 2010'
							},
							tooltip : {
								pointFormat : '{series.name}: <b>{point.percentage}%</b>',
								percentageDecimals : 1
							},
							plotOptions : {
								pie : {
									allowPointSelect : true,
									cursor : 'pointer',
									dataLabels : {
										enabled : true,
										color : '#000000',
										connectorColor : '#000000',
										formatter : function() {
											return '<b>' + this.point.name
													+ '</b>: '
													+ this.percentage + ' %';
										}
									}
								}
							},

							credits : {
								enabled : false
							},
							series : [ {
								type : 'pie',
								name : 'Browser share',
								data : [ [ 'Firefox', 45.0 ], [ 'IE', 26.8 ], {
									name : 'Chrome',
									y : 12.8,
									sliced : true,
									selected : true
								}, [ 'Safari', 8.5 ], [ 'Opera', 6.2 ],
										[ 'Others', 0.7 ] ]
							} ]
						});
	});
</script>
